<template>
  <div class="case-container">
    <div class="title-section">
      <h2>成功案例</h2>
      <p>面向丰富的业务场景，任云一直和优秀的企业示范</p>
    </div>
    
    <div class="logo-section">
      <div class="logo-container">
        <div 
          v-for="(company, index) in companies" 
          :key="index"
          class="logo-placeholder"
          :class="{ active: currentIndex === index }"
          @click="currentIndex = index"
        >
          {{ company.name }}
        </div>
      </div>
    </div>

    <div class="case-content">
      <div class="case-card">
        <div class="case-image-placeholder"></div>
        <div class="case-info">
          <h3>{{ companies[currentIndex].title }}</h3>
          <p v-for="(desc, i) in companies[currentIndex].description" :key="i">{{ desc }}</p>
          <a href="#" class="more-btn">查看案例详情</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const currentIndex = ref(0)

const companies = ref([
  {
    name: '东风汽车',
    title: '东风汽车智能制造数字化转型',
    description: [
      '通过数字化转型升级，实现生产线的智能化控制和实时监控，提高生产效率30%。',
      '建立完整的数据分析体系，优化供应链管理，降低运营成本达15%。'
    ]
  },
  {
    name: '中国光合',
    title: '中国光合新能源管理平台建设',
    description: [
      '打造新一代智能化能源管理平台，实现多能源协同调度和智能控制。',
      '通过大数据分析，提升能源使用效率，年节省运营成本超过2000万。'
    ]
  },
  {
    name: '中国南方电网',
    title: '南方电网智能配电系统升级',
    description: [
      '构建智能配电网络，实现配电自动化和故障自动检测修复。',
      '系统可靠性提升40%，故障响应时间缩短60%，服务满意度显著提升。'
    ]
  },
  {
    name: '徐能集团',
    title: '徐能集团能源管控平台建设',
    description: [
      '实现集团级能源消耗智能监控，建立预测预警机制。',
      '能源使用效率提升25%，年度节能减排目标超额完成。'
    ]
  },
  {
    name: '国家能源集团',
    title: '国家能源集团智慧电厂项目',
    description: [
      '打造数字化智慧电厂，实现设备全生命周期管理和预测性维护。',
      '设备故障率下降45%，维护成本降低30%，运营效率显著提升。'
    ]
  },
  {
    name: '交通银行',
    title: '交通银行湖北省分行无线网络系统数字化',
    description: [
      '全行统一的八小入口控制策略，终端接入认证入内网策略，多种终端安全全状态，不统一一安装终端软件，远程安装，整合统一的网络安全管理监控平台。',
      '我司支撑分行7万49家支行计12万终端的安全接入，以用户北交通网代理机制，查看设备，维护工作量显著减少，日志审计与网络接入人员表现动态，内网信息安全零风险。'
    ]
  }
])
</script>

<style lang="scss" scoped>
.case-container {
  padding: 60px 0;
  
  .title-section {
    text-align: center;
    margin-bottom: 40px;
    
    h2 {
      font-size: 32px;
      margin-bottom: 16px;
    }
    
    p {
      color: #666;
      font-size: 16px;
    }
  }

  .logo-section {
    margin-bottom: 40px;
    
    .logo-container {
      display: flex;
      justify-content: space-between; // 改为space-between
      align-items: center;
      flex-wrap: nowrap; // 禁止换行
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px; // 添加左右内边距
      
      .logo-placeholder {
        width: 160px; // 稍微调整宽度
        height: 60px;
        margin: 0 10px; // 修改边距
        background-color: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
        border-radius: 4px;
        transition: all 0.3s;
        cursor: pointer; 
        
        &:hover {
          background-color: #e0e0e0;
        }

        &:first-child {
          margin-left: 0; // 第一个元素左边距为0
        }

        &:last-child {
          margin-right: 0; // 最后一个元素右边距为0
        }

        &.active {
          background-color: #0066cc;
          color: white;
        }
        
        &:hover {
          background-color: #e0e0e0;
          
          &.active {
            background-color: #0066cc;
          }
        }
      }
    }
  }



  .case-content {
    max-width: 1200px;
    margin: 0 auto;
    
    .case-card {
      display: flex;
      background: #fff;
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
      border-radius: 8px;
      overflow: hidden;
      
      .case-image-placeholder {
        flex: 1;
        background-color: #e0e0e0;
        min-height: 400px;
      }
      
      .case-info {
        flex: 1;
        padding: 40px;
        background: #0066cc;
        color: white;
        
        h3 {
          font-size: 24px;
          margin-bottom: 20px;
        }
        
        p {
          margin-bottom: 16px;
          line-height: 1.6;
        }
        
        .more-btn {
          display: inline-block;
          padding: 10px 20px;
          background: white;
          color: #0066cc;
          text-decoration: none;
          border-radius: 4px;
          margin-top: 20px;
          
          &:hover {
            background: rgba(255,255,255,0.9);
          }
        }
      }
    }
  }
}
</style>